<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">
  <title>Zen 7.x-6.x Style Guide</title>

  <meta name="description" content="">
  <meta name="generator" content="kss-node">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="kss-assets/kss.css">
  <link rel="stylesheet" href="../css/styles.css">
<link rel="stylesheet" href="../css/style-guide/chroma-kss-styles.css">
<link rel="stylesheet" href="../css/style-guide/kss-only.css">

</head>
<body id="kss-node">

<div class="kss-sidebar kss-style">
  <header class="kss-header">
    <h1 class="kss-doc-title">Zen 7.x-6.x Style Guide</h1>
  </header>
  <nav class="kss-nav">
    <ul class="kss-nav__menu">
      <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="./">
          <span class="kss-nav__ref">0</span
          ><span class="kss-nav__name">Overview</span>
        </a>
      </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-sass.html">
          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
        </a>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-base.html">
          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
        </a>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-layouts.html">
          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
        </a>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-components.html">
          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
        </a>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-navigation.html">
          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
        </a>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-forms.html">
          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Forms</span>
        </a>
                  <ul class="kss-nav__menu-child">
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base">
                <span class="kss-nav__ref ">6.1</span
                ><span class="kss-nav__name">Form defaults</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-button">
                <span class="kss-nav__ref kss-nav__ref-child">6.1.1</span
                ><span class="kss-nav__name">Buttons</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-fieldset">
                <span class="kss-nav__ref kss-nav__ref-child">6.1.2</span
                ><span class="kss-nav__name">Fieldsets</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-input">
                <span class="kss-nav__ref kss-nav__ref-child">6.1.3</span
                ><span class="kss-nav__name">Inputs</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-input-checkbox">
                <span class="kss-nav__ref kss-nav__ref-child">6.1.4</span
                ><span class="kss-nav__name">Checkboxes</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-input-radio">
                <span class="kss-nav__ref kss-nav__ref-child">6.1.5</span
                ><span class="kss-nav__name">Radio buttons</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-label">
                <span class="kss-nav__ref kss-nav__ref-child">6.1.6</span
                ><span class="kss-nav__name">Labels</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-select">
                <span class="kss-nav__ref kss-nav__ref-child">6.1.7</span
                ><span class="kss-nav__name">Select list</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-textarea">
                <span class="kss-nav__ref kss-nav__ref-child">6.1.8</span
                ><span class="kss-nav__name">Text areas</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-autocomplete">
                <span class="kss-nav__ref ">6.2</span
                ><span class="kss-nav__name">Autocomplete field</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-button">
                <span class="kss-nav__ref ">6.3</span
                ><span class="kss-nav__name">Button</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-collapsible-fieldset">
                <span class="kss-nav__ref ">6.4</span
                ><span class="kss-nav__name">Collapsible fieldset</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-form-item">
                <span class="kss-nav__ref ">6.5</span
                ><span class="kss-nav__name">Form item</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-form-item--radio">
                <span class="kss-nav__ref ">6.6</span
                ><span class="kss-nav__name">Form item (radio)</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-form-table">
                <span class="kss-nav__ref ">6.7</span
                ><span class="kss-nav__name">Drupal admin tables</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-progress-bar">
                <span class="kss-nav__ref ">6.8</span
                ><span class="kss-nav__name">Progress bar</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-progress-throbber">
                <span class="kss-nav__ref ">6.9</span
                ><span class="kss-nav__name">Progress throbber</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-resizable-textarea">
                <span class="kss-nav__ref ">6.10</span
                ><span class="kss-nav__name">Resizable textarea</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-table-drag">
                <span class="kss-nav__ref ">6.11</span
                ><span class="kss-nav__name">Table drag</span>
              </a>
            </li>
                    </ul>
              </li>
        </ul>
  </nav>
</div>
<article role="main" class="kss-main">

  
          <div id="kssref-forms" class="kss-section kss-section--depth-1">
      <div class="kss-style">
                <h1 class="kss-title kss-title--level-1">
          <a class="kss-title__permalink" href="#kssref-forms">
            <span class="kss-title__ref">
              6
              <span class="kss-title__permalink-hash">
                forms
              </span>
            </span>
            Forms
          </a>
        </h1>

                  <div class="kss-description">
            <p>Form components are specialized design components that are applied to forms
or form elements.</p>

          </div>
        
              </div>

      
              <div class="kss-source kss-style">
          Source: <code>styles.scss</code>, line 83
        </div>
          </div>
          <section id="kssref-forms-base" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-forms-base">
            <span class="kss-title__ref">
              6.1
              <span class="kss-title__permalink-hash">
                forms.base
              </span>
            </span>
            Form defaults
          </a>
        </h2>

                  <div class="kss-description">
            <p>These are the default base styles applied to HTML form elements.</p>
<p>Component classes can override these styles, but if no class applies a style
to an HTML form element, these styles will be the ones displayed.</p>

          </div>
        
              </div>

      
              <div class="kss-source kss-style">
          Source: <code>base/forms/_forms.scss</code>, line 3
        </div>
          </section>
          <section id="kssref-forms-base-button" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-forms-base-button">
            <span class="kss-title__ref">
              6.1.1
              <span class="kss-title__permalink-hash">
                forms.base.button
              </span>
            </span>
            Buttons
          </a>
        </h3>

                  <div class="kss-description">
            <p>Buttons built with the <code>&lt;button&gt;</code> element are the most flexible for styling
purposes. But <code>&lt;input&gt;</code> elements with <code>type</code> set to <code>submit</code>, <code>image</code>,
<code>reset</code>, or <code>button</code> are also supported.</p>
<p>Below is the default button styling. To see variations on the button styling
see the <a href="section-forms.html#kssref-forms-button">button component</a>.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Examples          </div>

                      <div class="kss-modifier__default-name kss-style">
              Default styling
            </div>
          
          <div class="kss-modifier__example">
            <p>
  <button type="button" class="[modifier class]">Standard button</button>
  <button type="button" class="[modifier class]" disabled>disabled button</button>
</p>
<p>
  <button type="submit" class="[modifier class]">Submit button</button>
  <button type="submit" class="[modifier class]" disabled>Disabled submit button</button>
</p>
<p>
  <button type="reset" class="[modifier class]">Reset button</button>
  <button type="reset" class="[modifier class]" disabled>Disabled reset button</button>
</p>
<p>
  <input type="button" class="[modifier class]" value="Input button">
  <input type="button" class="[modifier class]" value="Disabled input button" disabled>
</p>
<p>
  <input type="submit" class="[modifier class]" value="Input submit button">
  <input type="submit" class="[modifier class]" value="Disabled input submit button" disabled>
</p>
<p>
  <input type="reset" class="[modifier class]" value="Input reset button">
  <input type="reset" class="[modifier class]" value="Disabled input reset button" disabled>
</p>

          </div>

                      <div class="kss-modifier__name kss-style">
              :hover
            </div>
            <div class="kss-modifier__description kss-style">
              Hover styling.
            </div>
            <div class="kss-modifier__example">
              <p>
  <button type="button" class="pseudo-class-hover">Standard button</button>
  <button type="button" class="pseudo-class-hover" disabled>disabled button</button>
</p>
<p>
  <button type="submit" class="pseudo-class-hover">Submit button</button>
  <button type="submit" class="pseudo-class-hover" disabled>Disabled submit button</button>
</p>
<p>
  <button type="reset" class="pseudo-class-hover">Reset button</button>
  <button type="reset" class="pseudo-class-hover" disabled>Disabled reset button</button>
</p>
<p>
  <input type="button" class="pseudo-class-hover" value="Input button">
  <input type="button" class="pseudo-class-hover" value="Disabled input button" disabled>
</p>
<p>
  <input type="submit" class="pseudo-class-hover" value="Input submit button">
  <input type="submit" class="pseudo-class-hover" value="Disabled input submit button" disabled>
</p>
<p>
  <input type="reset" class="pseudo-class-hover" value="Input reset button">
  <input type="reset" class="pseudo-class-hover" value="Disabled input reset button" disabled>
</p>

            </div>
                      <div class="kss-modifier__name kss-style">
              :active:hover
            </div>
            <div class="kss-modifier__description kss-style">
              Depressed button styling.
            </div>
            <div class="kss-modifier__example">
              <p>
  <button type="button" class="pseudo-class-active pseudo-class-hover">Standard button</button>
  <button type="button" class="pseudo-class-active pseudo-class-hover" disabled>disabled button</button>
</p>
<p>
  <button type="submit" class="pseudo-class-active pseudo-class-hover">Submit button</button>
  <button type="submit" class="pseudo-class-active pseudo-class-hover" disabled>Disabled submit button</button>
</p>
<p>
  <button type="reset" class="pseudo-class-active pseudo-class-hover">Reset button</button>
  <button type="reset" class="pseudo-class-active pseudo-class-hover" disabled>Disabled reset button</button>
</p>
<p>
  <input type="button" class="pseudo-class-active pseudo-class-hover" value="Input button">
  <input type="button" class="pseudo-class-active pseudo-class-hover" value="Disabled input button" disabled>
</p>
<p>
  <input type="submit" class="pseudo-class-active pseudo-class-hover" value="Input submit button">
  <input type="submit" class="pseudo-class-active pseudo-class-hover" value="Disabled input submit button" disabled>
</p>
<p>
  <input type="reset" class="pseudo-class-active pseudo-class-hover" value="Input reset button">
  <input type="reset" class="pseudo-class-active pseudo-class-hover" value="Disabled input reset button" disabled>
</p>

            </div>
                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;
  &lt;button type=&quot;button&quot; class=&quot;[modifier class]&quot;&gt;Standard button&lt;/button&gt;
  &lt;button type=&quot;button&quot; class=&quot;[modifier class]&quot; disabled&gt;disabled button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;button type=&quot;submit&quot; class=&quot;[modifier class]&quot;&gt;Submit button&lt;/button&gt;
  &lt;button type=&quot;submit&quot; class=&quot;[modifier class]&quot; disabled&gt;Disabled submit button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;button type=&quot;reset&quot; class=&quot;[modifier class]&quot;&gt;Reset button&lt;/button&gt;
  &lt;button type=&quot;reset&quot; class=&quot;[modifier class]&quot; disabled&gt;Disabled reset button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;input type=&quot;button&quot; class=&quot;[modifier class]&quot; value=&quot;Input button&quot;&gt;
  &lt;input type=&quot;button&quot; class=&quot;[modifier class]&quot; value=&quot;Disabled input button&quot; disabled&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;input type=&quot;submit&quot; class=&quot;[modifier class]&quot; value=&quot;Input submit button&quot;&gt;
  &lt;input type=&quot;submit&quot; class=&quot;[modifier class]&quot; value=&quot;Disabled input submit button&quot; disabled&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;input type=&quot;reset&quot; class=&quot;[modifier class]&quot; value=&quot;Input reset button&quot;&gt;
  &lt;input type=&quot;reset&quot; class=&quot;[modifier class]&quot; value=&quot;Disabled input reset button&quot; disabled&gt;
&lt;/p&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>base/forms/_forms.scss</code>, line 92
        </div>
          </section>
          <section id="kssref-forms-base-fieldset" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-forms-base-fieldset">
            <span class="kss-title__ref">
              6.1.2
              <span class="kss-title__permalink-hash">
                forms.base.fieldset
              </span>
            </span>
            Fieldsets
          </a>
        </h3>

                  <div class="kss-description">
            <p>The <code>&lt;fieldset&gt;</code> element groups a set of form fields, optionally under a
common name given by the <code>&lt;legend&gt;</code> element.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <fieldset class="">
  <legend>A fieldset</legend>
  <label for="fieldsetText">Text input</label>
  <input type="text" id="fieldsetText" placeholder="Text input">
</fieldset>

<fieldset class="" disabled>
  <legend>A disabled fieldset</legend>
  <div>
    <label for="fieldsetText2">Disabled text input</label>
    <input type="text" id="fieldsetText2" placeholder="Disabled input">
  </div>
  <div>
    <label for="fieldsetSelect">Disabled select menu</label>
    <select id="fieldsetSelect">
      <option>Disabled select</option>
    </select>
  </div>
  <div>
    <label><input type="checkbox"> Can't check this</label>
  </div>
</fieldset>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;fieldset class=&quot;&quot;&gt;
  &lt;legend&gt;A fieldset&lt;/legend&gt;
  &lt;label for=&quot;fieldsetText&quot;&gt;Text input&lt;/label&gt;
  &lt;input type=&quot;text&quot; id=&quot;fieldsetText&quot; placeholder=&quot;Text input&quot;&gt;
&lt;/fieldset&gt;

&lt;fieldset class=&quot;&quot; disabled&gt;
  &lt;legend&gt;A disabled fieldset&lt;/legend&gt;
  &lt;div&gt;
    &lt;label for=&quot;fieldsetText2&quot;&gt;Disabled text input&lt;/label&gt;
    &lt;input type=&quot;text&quot; id=&quot;fieldsetText2&quot; placeholder=&quot;Disabled input&quot;&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for=&quot;fieldsetSelect&quot;&gt;Disabled select menu&lt;/label&gt;
    &lt;select id=&quot;fieldsetSelect&quot;&gt;
      &lt;option&gt;Disabled select&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label&gt;&lt;input type=&quot;checkbox&quot;&gt; Can&#039;t check this&lt;/label&gt;
  &lt;/div&gt;
&lt;/fieldset&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>base/forms/_forms.scss</code>, line 188
        </div>
          </section>
          <section id="kssref-forms-base-input" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-forms-base-input">
            <span class="kss-title__ref">
              6.1.3
              <span class="kss-title__permalink-hash">
                forms.base.input
              </span>
            </span>
            Inputs
          </a>
        </h3>

                  <div class="kss-description">
            <p>The <code>&lt;input&gt;</code> element is mostly used for text-based inputs that include the
HTML5 types: <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, <code>password</code>, <code>date</code>,
<code>time</code>, <code>number</code>, <code>range</code>, <code>color</code>, and <code>file</code>.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <div>
  <label for="inputText">Text</label>
  <input type="text" class="" id="inputText" placeholder="Enter some text">
</div>
<div>
  <label for="inputSearch">Search</label>
  <input type="search" class="" id="inputSearch" placeholder="Search">
</div>
<div>
  <label for="inputTel">Telephone</label>
  <input type="text" class="" id="inputTel" placeholder="Enter some text">
</div>
<div>
  <label for="inputURL">URL</label>
  <input type="url" class="" id="inputURL" placeholder="Enter a URL">
</div>
<div>
  <label for="inputEmail">Email address</label>
  <input type="email" class="" id="inputEmail" placeholder="Enter email">
</div>
<div>
  <label for="inputPassword">Password</label>
  <input type="password" class="" id="inputPassword" placeholder="Password">
</div>
<div>
  <label for="inputDate">Date</label>
  <input type="date" class="" id="inputDate" placeholder="Enter a date">
</div>
<div>
  <label for="inputTime">Time</label>
  <input type="time" class="" id="inputTime" placeholder="Enter a time">
</div>
<div>
  <label for="inputNumber">Number</label>
  <input type="number" class="" id="inputNumber" placeholder="Enter a number">
</div>
<div>
  <label for="inputRange">Range</label>
  <input type="range" class="" id="inputRange" placeholder="Enter a range">
</div>
<div>
  <label for="inputColor">Color</label>
  <input type="color" class="" id="inputColor" placeholder="Enter a color">
</div>
<div>
  <label for="inputFile">File input</label>
  <input type="file" class="" id="inputFile">
</div>

<div>
  <label for="inputText">Disabled text</label>
  <input type="text" class="" disabled id="inputText" placeholder="Disabled text">
</div>
<div>
  <label for="inputSearch">Disabled search</label>
  <input type="search" class="" disabled id="inputSearch" placeholder="Disabled search">
</div>
<div>
  <label for="inputTel">Disabled telephone</label>
  <input type="text" class="" disabled id="inputTel" placeholder="Disabled telephone">
</div>
<div>
  <label for="inputURL">Disabled URL</label>
  <input type="url" class="" disabled id="inputURL" placeholder="Disabled URL">
</div>
<div>
  <label for="inputEmail">Disabled email address</label>
  <input type="email" class="" disabled id="inputEmail" placeholder="Disabled email">
</div>
<div>
  <label for="inputPassword">Disabled password</label>
  <input type="password" class="" disabled id="inputPassword" placeholder="Disabled password">
</div>
<div>
  <label for="inputDate">Disabled date</label>
  <input type="date" class="" disabled id="inputDate" placeholder="Disabled date">
</div>
<div>
  <label for="inputTime">Disabled time</label>
  <input type="time" class="" disabled id="inputTime" placeholder="Disabled time">
</div>
<div>
  <label for="inputNumber">Disabled number</label>
  <input type="number" class="" disabled id="inputNumber" placeholder="Disabled number">
</div>
<div>
  <label for="inputRange">Disabled range</label>
  <input type="range" class="" disabled id="inputRange" placeholder="Disabled range">
</div>
<div>
  <label for="inputColor">Disabled color</label>
  <input type="color" class="" disabled id="inputColor" placeholder="Disabled color">
</div>
<div>
  <label for="inputFile">Disabled file input</label>
  <input type="file" class="" disabled id="inputFile">
</div>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
  &lt;label for=&quot;inputText&quot;&gt;Text&lt;/label&gt;
  &lt;input type=&quot;text&quot; class=&quot;&quot; id=&quot;inputText&quot; placeholder=&quot;Enter some text&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputSearch&quot;&gt;Search&lt;/label&gt;
  &lt;input type=&quot;search&quot; class=&quot;&quot; id=&quot;inputSearch&quot; placeholder=&quot;Search&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputTel&quot;&gt;Telephone&lt;/label&gt;
  &lt;input type=&quot;text&quot; class=&quot;&quot; id=&quot;inputTel&quot; placeholder=&quot;Enter some text&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputURL&quot;&gt;URL&lt;/label&gt;
  &lt;input type=&quot;url&quot; class=&quot;&quot; id=&quot;inputURL&quot; placeholder=&quot;Enter a URL&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputEmail&quot;&gt;Email address&lt;/label&gt;
  &lt;input type=&quot;email&quot; class=&quot;&quot; id=&quot;inputEmail&quot; placeholder=&quot;Enter email&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputPassword&quot;&gt;Password&lt;/label&gt;
  &lt;input type=&quot;password&quot; class=&quot;&quot; id=&quot;inputPassword&quot; placeholder=&quot;Password&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputDate&quot;&gt;Date&lt;/label&gt;
  &lt;input type=&quot;date&quot; class=&quot;&quot; id=&quot;inputDate&quot; placeholder=&quot;Enter a date&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputTime&quot;&gt;Time&lt;/label&gt;
  &lt;input type=&quot;time&quot; class=&quot;&quot; id=&quot;inputTime&quot; placeholder=&quot;Enter a time&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputNumber&quot;&gt;Number&lt;/label&gt;
  &lt;input type=&quot;number&quot; class=&quot;&quot; id=&quot;inputNumber&quot; placeholder=&quot;Enter a number&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputRange&quot;&gt;Range&lt;/label&gt;
  &lt;input type=&quot;range&quot; class=&quot;&quot; id=&quot;inputRange&quot; placeholder=&quot;Enter a range&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputColor&quot;&gt;Color&lt;/label&gt;
  &lt;input type=&quot;color&quot; class=&quot;&quot; id=&quot;inputColor&quot; placeholder=&quot;Enter a color&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputFile&quot;&gt;File input&lt;/label&gt;
  &lt;input type=&quot;file&quot; class=&quot;&quot; id=&quot;inputFile&quot;&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;label for=&quot;inputText&quot;&gt;Disabled text&lt;/label&gt;
  &lt;input type=&quot;text&quot; class=&quot;&quot; disabled id=&quot;inputText&quot; placeholder=&quot;Disabled text&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputSearch&quot;&gt;Disabled search&lt;/label&gt;
  &lt;input type=&quot;search&quot; class=&quot;&quot; disabled id=&quot;inputSearch&quot; placeholder=&quot;Disabled search&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputTel&quot;&gt;Disabled telephone&lt;/label&gt;
  &lt;input type=&quot;text&quot; class=&quot;&quot; disabled id=&quot;inputTel&quot; placeholder=&quot;Disabled telephone&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputURL&quot;&gt;Disabled URL&lt;/label&gt;
  &lt;input type=&quot;url&quot; class=&quot;&quot; disabled id=&quot;inputURL&quot; placeholder=&quot;Disabled URL&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputEmail&quot;&gt;Disabled email address&lt;/label&gt;
  &lt;input type=&quot;email&quot; class=&quot;&quot; disabled id=&quot;inputEmail&quot; placeholder=&quot;Disabled email&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputPassword&quot;&gt;Disabled password&lt;/label&gt;
  &lt;input type=&quot;password&quot; class=&quot;&quot; disabled id=&quot;inputPassword&quot; placeholder=&quot;Disabled password&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputDate&quot;&gt;Disabled date&lt;/label&gt;
  &lt;input type=&quot;date&quot; class=&quot;&quot; disabled id=&quot;inputDate&quot; placeholder=&quot;Disabled date&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputTime&quot;&gt;Disabled time&lt;/label&gt;
  &lt;input type=&quot;time&quot; class=&quot;&quot; disabled id=&quot;inputTime&quot; placeholder=&quot;Disabled time&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputNumber&quot;&gt;Disabled number&lt;/label&gt;
  &lt;input type=&quot;number&quot; class=&quot;&quot; disabled id=&quot;inputNumber&quot; placeholder=&quot;Disabled number&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputRange&quot;&gt;Disabled range&lt;/label&gt;
  &lt;input type=&quot;range&quot; class=&quot;&quot; disabled id=&quot;inputRange&quot; placeholder=&quot;Disabled range&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputColor&quot;&gt;Disabled color&lt;/label&gt;
  &lt;input type=&quot;color&quot; class=&quot;&quot; disabled id=&quot;inputColor&quot; placeholder=&quot;Disabled color&quot;&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;inputFile&quot;&gt;Disabled file input&lt;/label&gt;
  &lt;input type=&quot;file&quot; class=&quot;&quot; disabled id=&quot;inputFile&quot;&gt;
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>base/forms/_forms.scss</code>, line 116
        </div>
          </section>
          <section id="kssref-forms-base-input-checkbox" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-forms-base-input-checkbox">
            <span class="kss-title__ref">
              6.1.4
              <span class="kss-title__permalink-hash">
                forms.base.input-checkbox
              </span>
            </span>
            Checkboxes
          </a>
        </h3>

                  <div class="kss-description">
            <p>If an <code>&lt;input&gt;</code> element has the <code>type=&#39;checkbox&#39;</code> attribute set, the form
field is displayed as a checkbox.</p>
<p>It&#39;s recommended that you don&#39;t attempt to style these elements. Firefox&#39;s
implementation doesn&#39;t respect <code>box-sizing</code>, <code>padding</code>, or <code>width</code>.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <div>
  <label><input type="checkbox" class=""> Check me out</label>
</div>

<div>
  <label><input type="checkbox" class="" value="" disabled> Option two is disabled</label>
</div>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
  &lt;label&gt;&lt;input type=&quot;checkbox&quot; class=&quot;&quot;&gt; Check me out&lt;/label&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;label&gt;&lt;input type=&quot;checkbox&quot; class=&quot;&quot; value=&quot;&quot; disabled&gt; Option two is disabled&lt;/label&gt;
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>base/forms/_forms.scss</code>, line 150
        </div>
          </section>
          <section id="kssref-forms-base-input-radio" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-forms-base-input-radio">
            <span class="kss-title__ref">
              6.1.5
              <span class="kss-title__permalink-hash">
                forms.base.input-radio
              </span>
            </span>
            Radio buttons
          </a>
        </h3>

                  <div class="kss-description">
            <p>If an <code>&lt;input&gt;</code> element has the <code>type=&#39;radio&#39;</code> attribute set, the form field
is displayed as a radio button.</p>
<p>It&#39;s recommended that you don&#39;t attempt to style these elements. Firefox&#39;s
implementation doesn&#39;t respect <code>box-sizing</code>, <code>padding</code>, or <code>width</code>.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <div>
  <label><input type="radio" class="" value="option1" name="example-radio" checked> Option one</label>
</div>

<div>
  <label><input type="radio" class="" value="option2" name="example-radio"> Option two</label>
</div>

<div>
  <label><input type="radio" class="" value="option3" name="example-radio" disabled> Option three is disabled</label>
</div>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
  &lt;label&gt;&lt;input type=&quot;radio&quot; class=&quot;&quot; value=&quot;option1&quot; name=&quot;example-radio&quot; checked&gt; Option one&lt;/label&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;label&gt;&lt;input type=&quot;radio&quot; class=&quot;&quot; value=&quot;option2&quot; name=&quot;example-radio&quot;&gt; Option two&lt;/label&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;label&gt;&lt;input type=&quot;radio&quot; class=&quot;&quot; value=&quot;option3&quot; name=&quot;example-radio&quot; disabled&gt; Option three is disabled&lt;/label&gt;
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>base/forms/_forms.scss</code>, line 162
        </div>
          </section>
          <section id="kssref-forms-base-label" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-forms-base-label">
            <span class="kss-title__ref">
              6.1.6
              <span class="kss-title__permalink-hash">
                forms.base.label
              </span>
            </span>
            Labels
          </a>
        </h3>

                  <div class="kss-description">
            <p>The <code>&lt;label&gt;</code> element represents a caption of a form field. The label can be
associated with a specific form control by using the <code>for</code> attribute or by
putting the form control inside the label element itself.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <div>
  <label class="" for="lableInputText">A label for a text input</label>
  <input type="text" id="lableInputText" placeholder="Enter some text">
</div>

<div>
  <label class=""><input type="checkbox"> A label wrapped around a checkbox</label>
</div>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
  &lt;label class=&quot;&quot; for=&quot;lableInputText&quot;&gt;A label for a text input&lt;/label&gt;
  &lt;input type=&quot;text&quot; id=&quot;lableInputText&quot; placeholder=&quot;Enter some text&quot;&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;label class=&quot;&quot;&gt;&lt;input type=&quot;checkbox&quot;&gt; A label wrapped around a checkbox&lt;/label&gt;
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>base/forms/_forms.scss</code>, line 222
        </div>
          </section>
          <section id="kssref-forms-base-select" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-forms-base-select">
            <span class="kss-title__ref">
              6.1.7
              <span class="kss-title__permalink-hash">
                forms.base.select
              </span>
            </span>
            Select list
          </a>
        </h3>

                  <div class="kss-description">
            <p>The <code>&lt;select&gt;</code> element represents a form field for selecting amongst a set of
options.</p>
<p>Known limitation: by default, Chrome and Safari on OS X allow very limited
styling of <code>&lt;select&gt;</code>, unless a <code>border</code> property is set.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <div>
  <label for="selectDropdown">A standard drop-down</label>
  <select class="" id="selectDropdown">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <optgroup label="More options">
      <option>Option 4</option>
      <option>Option 5</option>
    </optgroup>
  </select>
</div>

<div>
  <label for="selectMultiItem">A multi-item select field</label>
  <select class="" id="selectMultiItem" multiple>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <optgroup label="More options">
      <option>Option 4</option>
      <option>Option 5</option>
    </optgroup>
  </select>
</div>

<div>
  <label for="selectDisabled">A disabled drop-down</label>
  <select class="" id="selectDisabled" disabled>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <optgroup label="More options">
      <option>Option 4</option>
      <option>Option 5</option>
    </optgroup>
  </select>
</div>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
  &lt;label for=&quot;selectDropdown&quot;&gt;A standard drop-down&lt;/label&gt;
  &lt;select class=&quot;&quot; id=&quot;selectDropdown&quot;&gt;
    &lt;option&gt;Option 1&lt;/option&gt;
    &lt;option&gt;Option 2&lt;/option&gt;
    &lt;option&gt;Option 3&lt;/option&gt;
    &lt;optgroup label=&quot;More options&quot;&gt;
      &lt;option&gt;Option 4&lt;/option&gt;
      &lt;option&gt;Option 5&lt;/option&gt;
    &lt;/optgroup&gt;
  &lt;/select&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;label for=&quot;selectMultiItem&quot;&gt;A multi-item select field&lt;/label&gt;
  &lt;select class=&quot;&quot; id=&quot;selectMultiItem&quot; multiple&gt;
    &lt;option&gt;Option 1&lt;/option&gt;
    &lt;option&gt;Option 2&lt;/option&gt;
    &lt;option&gt;Option 3&lt;/option&gt;
    &lt;optgroup label=&quot;More options&quot;&gt;
      &lt;option&gt;Option 4&lt;/option&gt;
      &lt;option&gt;Option 5&lt;/option&gt;
    &lt;/optgroup&gt;
  &lt;/select&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;label for=&quot;selectDisabled&quot;&gt;A disabled drop-down&lt;/label&gt;
  &lt;select class=&quot;&quot; id=&quot;selectDisabled&quot; disabled&gt;
    &lt;option&gt;Option 1&lt;/option&gt;
    &lt;option&gt;Option 2&lt;/option&gt;
    &lt;option&gt;Option 3&lt;/option&gt;
    &lt;optgroup label=&quot;More options&quot;&gt;
      &lt;option&gt;Option 4&lt;/option&gt;
      &lt;option&gt;Option 5&lt;/option&gt;
    &lt;/optgroup&gt;
  &lt;/select&gt;
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>base/forms/_forms.scss</code>, line 238
        </div>
          </section>
          <section id="kssref-forms-base-textarea" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-forms-base-textarea">
            <span class="kss-title__ref">
              6.1.8
              <span class="kss-title__permalink-hash">
                forms.base.textarea
              </span>
            </span>
            Text areas
          </a>
        </h3>

                  <div class="kss-description">
            <p>The <code>&lt;textarea&gt;</code> element represents a multi-line plain text form field.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <div>
  <label for="exampleTextarea">Text area</label>
  <textarea class="" rows="3" id="exampleTextarea"></textarea>
</div>
<div>
  <label for="exampleTextarea">Disabled text area</label>
  <textarea class="" rows="3" id="exampleTextarea" disabled></textarea>
</div>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
  &lt;label for=&quot;exampleTextarea&quot;&gt;Text area&lt;/label&gt;
  &lt;textarea class=&quot;&quot; rows=&quot;3&quot; id=&quot;exampleTextarea&quot;&gt;&lt;/textarea&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;label for=&quot;exampleTextarea&quot;&gt;Disabled text area&lt;/label&gt;
  &lt;textarea class=&quot;&quot; rows=&quot;3&quot; id=&quot;exampleTextarea&quot; disabled&gt;&lt;/textarea&gt;
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>base/forms/_forms.scss</code>, line 259
        </div>
          </section>
          <section id="kssref-forms-autocomplete" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-forms-autocomplete">
            <span class="kss-title__ref">
              6.2
              <span class="kss-title__permalink-hash">
                forms.autocomplete
              </span>
            </span>
            Autocomplete field
          </a>
        </h2>

                  <div class="kss-description">
            <p>As the user starts to type a value, a selection list appears below the form
item allowing them to choose an option.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Examples          </div>

                      <div class="kss-modifier__default-name kss-style">
              Default styling
            </div>
          
          <div class="kss-modifier__example">
            <input type="text" value="" class="autocomplete [modifier class]">
<div class="autocomplete__list-wrapper">
  <ul class="autocomplete__list">
  <li class="autocomplete__list-item">guwatif</li>
  <li class="autocomplete__list-item is-selected">hichiuasl</li>
  </ul>
</div>
<p>&nbsp;</p>

          </div>

                      <div class="kss-modifier__name kss-style">
              .is-throbbing
            </div>
            <div class="kss-modifier__description kss-style">
              Waiting for search result.
            </div>
            <div class="kss-modifier__example">
              <input type="text" value="" class="autocomplete is-throbbing">
<div class="autocomplete__list-wrapper">
  <ul class="autocomplete__list">
  <li class="autocomplete__list-item">guwatif</li>
  <li class="autocomplete__list-item is-selected">hichiuasl</li>
  </ul>
</div>
<p>&nbsp;</p>

            </div>
                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;input type=&quot;text&quot; value=&quot;&quot; class=&quot;autocomplete [modifier class]&quot;&gt;
&lt;div class=&quot;autocomplete__list-wrapper&quot;&gt;
  &lt;ul class=&quot;autocomplete__list&quot;&gt;
  &lt;li class=&quot;autocomplete__list-item&quot;&gt;guwatif&lt;/li&gt;
  &lt;li class=&quot;autocomplete__list-item is-selected&quot;&gt;hichiuasl&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>forms/autocomplete/_autocomplete.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-forms-button" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-forms-button">
            <span class="kss-title__ref">
              6.3
              <span class="kss-title__permalink-hash">
                forms.button
              </span>
            </span>
            Button
          </a>
        </h2>

                  <div class="kss-description">
            <p>In addition to the default styling of <code>&lt;button&gt;</code> and
<code>&lt;input type=&quot;submit|image|reset|button&quot;&gt;</code> elements, the <code>.button</code> class and
its variants can apply buttons styles to various elements (like an <code>&lt;a&gt;</code>
link).</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Examples          </div>

                      <div class="kss-modifier__default-name kss-style">
              Default styling
            </div>
          
          <div class="kss-modifier__example">
            <p>
  <button class="button [modifier class]" type="button">Standard button</button>
  <button class="button [modifier class]" type="button" disabled>Disabled button</button>
</p>
<p>
  <button class="button [modifier class]" type="submit">Submit button</button>
  <button class="button [modifier class]" type="submit" disabled>Disabled submit button</button>
</p>
<p>
  <button class="button [modifier class]" type="reset">Reset button</button>
  <button class="button [modifier class]" type="reset" disabled>Disabled reset button</button>
</p>
<p>
  <input class="button [modifier class]" type="button" value="Input button">
  <input class="button [modifier class]" type="button" value="Disabled input button" disabled>
</p>
<p>
  <input class="button [modifier class]" type="submit" value="Input submit button">
  <input class="button [modifier class]" type="submit" value="Disabled input submit button" disabled>
</p>
<p>
  <input class="button [modifier class]" type="reset" value="Input reset button">
  <input class="button [modifier class]" type="reset" value="Disabled input reset button" disabled>
</p>
<p>
  <a class="button [modifier class]" href="#">Link button</a>
  <a class="button [modifier class]" disabled href="#">Disabled link button</a>
</p>

          </div>

                      <div class="kss-modifier__name kss-style">
              :hover
            </div>
            <div class="kss-modifier__description kss-style">
              Hover styling.
            </div>
            <div class="kss-modifier__example">
              <p>
  <button class="button pseudo-class-hover" type="button">Standard button</button>
  <button class="button pseudo-class-hover" type="button" disabled>Disabled button</button>
</p>
<p>
  <button class="button pseudo-class-hover" type="submit">Submit button</button>
  <button class="button pseudo-class-hover" type="submit" disabled>Disabled submit button</button>
</p>
<p>
  <button class="button pseudo-class-hover" type="reset">Reset button</button>
  <button class="button pseudo-class-hover" type="reset" disabled>Disabled reset button</button>
</p>
<p>
  <input class="button pseudo-class-hover" type="button" value="Input button">
  <input class="button pseudo-class-hover" type="button" value="Disabled input button" disabled>
</p>
<p>
  <input class="button pseudo-class-hover" type="submit" value="Input submit button">
  <input class="button pseudo-class-hover" type="submit" value="Disabled input submit button" disabled>
</p>
<p>
  <input class="button pseudo-class-hover" type="reset" value="Input reset button">
  <input class="button pseudo-class-hover" type="reset" value="Disabled input reset button" disabled>
</p>
<p>
  <a class="button pseudo-class-hover" href="#">Link button</a>
  <a class="button pseudo-class-hover" disabled href="#">Disabled link button</a>
</p>

            </div>
                      <div class="kss-modifier__name kss-style">
              :active
            </div>
            <div class="kss-modifier__description kss-style">
              Depressed button styling.
            </div>
            <div class="kss-modifier__example">
              <p>
  <button class="button pseudo-class-active" type="button">Standard button</button>
  <button class="button pseudo-class-active" type="button" disabled>Disabled button</button>
</p>
<p>
  <button class="button pseudo-class-active" type="submit">Submit button</button>
  <button class="button pseudo-class-active" type="submit" disabled>Disabled submit button</button>
</p>
<p>
  <button class="button pseudo-class-active" type="reset">Reset button</button>
  <button class="button pseudo-class-active" type="reset" disabled>Disabled reset button</button>
</p>
<p>
  <input class="button pseudo-class-active" type="button" value="Input button">
  <input class="button pseudo-class-active" type="button" value="Disabled input button" disabled>
</p>
<p>
  <input class="button pseudo-class-active" type="submit" value="Input submit button">
  <input class="button pseudo-class-active" type="submit" value="Disabled input submit button" disabled>
</p>
<p>
  <input class="button pseudo-class-active" type="reset" value="Input reset button">
  <input class="button pseudo-class-active" type="reset" value="Disabled input reset button" disabled>
</p>
<p>
  <a class="button pseudo-class-active" href="#">Link button</a>
  <a class="button pseudo-class-active" disabled href="#">Disabled link button</a>
</p>

            </div>
                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;
  &lt;button class=&quot;button [modifier class]&quot; type=&quot;button&quot;&gt;Standard button&lt;/button&gt;
  &lt;button class=&quot;button [modifier class]&quot; type=&quot;button&quot; disabled&gt;Disabled button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;button class=&quot;button [modifier class]&quot; type=&quot;submit&quot;&gt;Submit button&lt;/button&gt;
  &lt;button class=&quot;button [modifier class]&quot; type=&quot;submit&quot; disabled&gt;Disabled submit button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;button class=&quot;button [modifier class]&quot; type=&quot;reset&quot;&gt;Reset button&lt;/button&gt;
  &lt;button class=&quot;button [modifier class]&quot; type=&quot;reset&quot; disabled&gt;Disabled reset button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;input class=&quot;button [modifier class]&quot; type=&quot;button&quot; value=&quot;Input button&quot;&gt;
  &lt;input class=&quot;button [modifier class]&quot; type=&quot;button&quot; value=&quot;Disabled input button&quot; disabled&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;input class=&quot;button [modifier class]&quot; type=&quot;submit&quot; value=&quot;Input submit button&quot;&gt;
  &lt;input class=&quot;button [modifier class]&quot; type=&quot;submit&quot; value=&quot;Disabled input submit button&quot; disabled&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;input class=&quot;button [modifier class]&quot; type=&quot;reset&quot; value=&quot;Input reset button&quot;&gt;
  &lt;input class=&quot;button [modifier class]&quot; type=&quot;reset&quot; value=&quot;Disabled input reset button&quot; disabled&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;a class=&quot;button [modifier class]&quot; href=&quot;#&quot;&gt;Link button&lt;/a&gt;
  &lt;a class=&quot;button [modifier class]&quot; disabled href=&quot;#&quot;&gt;Disabled link button&lt;/a&gt;
&lt;/p&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>forms/button/_button.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-forms-collapsible-fieldset" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-forms-collapsible-fieldset">
            <span class="kss-title__ref">
              6.4
              <span class="kss-title__permalink-hash">
                forms.collapsible-fieldset
              </span>
            </span>
            Collapsible fieldset
          </a>
        </h2>

                  <div class="kss-description">
            <p>Fieldsets with optional entry fields can be hidden with collapsed fieldsets.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Examples          </div>

                      <div class="kss-modifier__default-name kss-style">
              Default styling
            </div>
          
          <div class="kss-modifier__example">
            <fieldset class="collapsible-fieldset [modifier class]">
  <legend>
    <span class="collapsible-fieldset__legend">
      A collapsible fieldset
      <span class="collapsible-fieldset__summary">A summary of the form state</span>
    </span>
  </legend>
  <div class="collapsible-fieldset__wrapper">
    Place the form elements to hide inside this wrapping div.
  </div>
</fieldset>

          </div>

                      <div class="kss-modifier__name kss-style">
              .is-collapsed
            </div>
            <div class="kss-modifier__description kss-style">
              The collapsed fieldset.
            </div>
            <div class="kss-modifier__example">
              <fieldset class="collapsible-fieldset is-collapsed">
  <legend>
    <span class="collapsible-fieldset__legend">
      A collapsible fieldset
      <span class="collapsible-fieldset__summary">A summary of the form state</span>
    </span>
  </legend>
  <div class="collapsible-fieldset__wrapper">
    Place the form elements to hide inside this wrapping div.
  </div>
</fieldset>

            </div>
                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;fieldset class=&quot;collapsible-fieldset [modifier class]&quot;&gt;
  &lt;legend&gt;
    &lt;span class=&quot;collapsible-fieldset__legend&quot;&gt;
      A collapsible fieldset
      &lt;span class=&quot;collapsible-fieldset__summary&quot;&gt;A summary of the form state&lt;/span&gt;
    &lt;/span&gt;
  &lt;/legend&gt;
  &lt;div class=&quot;collapsible-fieldset__wrapper&quot;&gt;
    Place the form elements to hide inside this wrapping div.
  &lt;/div&gt;
&lt;/fieldset&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>forms/collapsible-fieldset/_collapsible-fieldset.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-forms-form-item" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-forms-form-item">
            <span class="kss-title__ref">
              6.5
              <span class="kss-title__permalink-hash">
                forms.form-item
              </span>
            </span>
            Form item
          </a>
        </h2>

                  <div class="kss-description">
            <p>Wrapper for a form element (or group of form elements) and its label.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Examples          </div>

                      <div class="kss-modifier__default-name kss-style">
              Default styling
            </div>
          
          <div class="kss-modifier__example">
            <div class="form-item [modifier class]">
  <label class="form-item__label" for="form-item-input">Label <span class="form-item__required" title="This field is required.">*</span></label>
  <input class="form-item__widget" type="text" id="form-item-input" value="Text value">
  <div class="form-item__description">
    Form item description.
  </div>
</div>
<div class="form-item [modifier class]">
  <label class="form-item__label" for="form-item-input-2">Another label <span class="form-item__required" title="This field is required.">*</span></label>
  <input class="form-item__widget" type="text" id="form-item-input-2" value="Text value">
  <div class="form-item__description">
    Another form item description.
  </div>
</div>

          </div>

                      <div class="kss-modifier__name kss-style">
              .form-item--inline
            </div>
            <div class="kss-modifier__description kss-style">
              Inline form items.
            </div>
            <div class="kss-modifier__example">
              <div class="form-item form-item--inline">
  <label class="form-item__label" for="form-item-input">Label <span class="form-item__required" title="This field is required.">*</span></label>
  <input class="form-item__widget" type="text" id="form-item-input" value="Text value">
  <div class="form-item__description">
    Form item description.
  </div>
</div>
<div class="form-item form-item--inline">
  <label class="form-item__label" for="form-item-input-2">Another label <span class="form-item__required" title="This field is required.">*</span></label>
  <input class="form-item__widget" type="text" id="form-item-input-2" value="Text value">
  <div class="form-item__description">
    Another form item description.
  </div>
</div>

            </div>
                      <div class="kss-modifier__name kss-style">
              .form-item--tight
            </div>
            <div class="kss-modifier__description kss-style">
              Packs groups of form items closer together.
            </div>
            <div class="kss-modifier__example">
              <div class="form-item form-item--tight">
  <label class="form-item__label" for="form-item-input">Label <span class="form-item__required" title="This field is required.">*</span></label>
  <input class="form-item__widget" type="text" id="form-item-input" value="Text value">
  <div class="form-item__description">
    Form item description.
  </div>
</div>
<div class="form-item form-item--tight">
  <label class="form-item__label" for="form-item-input-2">Another label <span class="form-item__required" title="This field is required.">*</span></label>
  <input class="form-item__widget" type="text" id="form-item-input-2" value="Text value">
  <div class="form-item__description">
    Another form item description.
  </div>
</div>

            </div>
                      <div class="kss-modifier__name kss-style">
              .is-error
            </div>
            <div class="kss-modifier__description kss-style">
              Highlight the form elements that caused a form submission error.
            </div>
            <div class="kss-modifier__example">
              <div class="form-item is-error">
  <label class="form-item__label" for="form-item-input">Label <span class="form-item__required" title="This field is required.">*</span></label>
  <input class="form-item__widget" type="text" id="form-item-input" value="Text value">
  <div class="form-item__description">
    Form item description.
  </div>
</div>
<div class="form-item is-error">
  <label class="form-item__label" for="form-item-input-2">Another label <span class="form-item__required" title="This field is required.">*</span></label>
  <input class="form-item__widget" type="text" id="form-item-input-2" value="Text value">
  <div class="form-item__description">
    Another form item description.
  </div>
</div>

            </div>
                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;form-item [modifier class]&quot;&gt;
  &lt;label class=&quot;form-item__label&quot; for=&quot;form-item-input&quot;&gt;Label &lt;span class=&quot;form-item__required&quot; title=&quot;This field is required.&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
  &lt;input class=&quot;form-item__widget&quot; type=&quot;text&quot; id=&quot;form-item-input&quot; value=&quot;Text value&quot;&gt;
  &lt;div class=&quot;form-item__description&quot;&gt;
    Form item description.
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;form-item [modifier class]&quot;&gt;
  &lt;label class=&quot;form-item__label&quot; for=&quot;form-item-input-2&quot;&gt;Another label &lt;span class=&quot;form-item__required&quot; title=&quot;This field is required.&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
  &lt;input class=&quot;form-item__widget&quot; type=&quot;text&quot; id=&quot;form-item-input-2&quot; value=&quot;Text value&quot;&gt;
  &lt;div class=&quot;form-item__description&quot;&gt;
    Another form item description.
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>forms/form-item/_form-item.scss</code>, line 4
        </div>
          </section>
          <section id="kssref-forms-form-item--radio" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-forms-form-item--radio">
            <span class="kss-title__ref">
              6.6
              <span class="kss-title__permalink-hash">
                forms.form-item--radio
              </span>
            </span>
            Form item (radio)
          </a>
        </h2>

                  <div class="kss-description">
            <p>Checkboxes and radios require slightly different markup; their label is after
their widget instead of before. Uses the <code>.form-item--radio</code> class variant of
the normal form item and is placed on each of the nested form items.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Examples          </div>

                      <div class="kss-modifier__default-name kss-style">
              Default styling
            </div>
          
          <div class="kss-modifier__example">
            <div class="form-item">
  <label class="form-item__label" for="group">Label for the group</label>
  <div class="form-item__description">
    Form group description.
  </div>
  <div class="form-item__group" id="group">
    <div class="form-item--radio [modifier class]">
      <input class="form-item__widget" type="checkbox" id="option-1" value="1">
      <label class="form-item__label" for="option-1">Option 1</label>
      <div class="form-item__description">
        Form item description.
      </div>
    </div>
    <div class="form-item--radio [modifier class]">
      <input class="form-item__widget" type="checkbox" id="option-2" value="2">
      <label class="form-item__label" for="option-2">Option 2</label>
      <div class="form-item__description">
        Form item description.
      </div>
    </div>
  </div>
</div>

          </div>

                      <div class="kss-modifier__name kss-style">
              .is-error
            </div>
            <div class="kss-modifier__description kss-style">
              Highlight the form elements that caused a form submission error.
            </div>
            <div class="kss-modifier__example">
              <div class="form-item">
  <label class="form-item__label" for="group">Label for the group</label>
  <div class="form-item__description">
    Form group description.
  </div>
  <div class="form-item__group" id="group">
    <div class="form-item--radio is-error">
      <input class="form-item__widget" type="checkbox" id="option-1" value="1">
      <label class="form-item__label" for="option-1">Option 1</label>
      <div class="form-item__description">
        Form item description.
      </div>
    </div>
    <div class="form-item--radio is-error">
      <input class="form-item__widget" type="checkbox" id="option-2" value="2">
      <label class="form-item__label" for="option-2">Option 2</label>
      <div class="form-item__description">
        Form item description.
      </div>
    </div>
  </div>
</div>

            </div>
                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;form-item&quot;&gt;
  &lt;label class=&quot;form-item__label&quot; for=&quot;group&quot;&gt;Label for the group&lt;/label&gt;
  &lt;div class=&quot;form-item__description&quot;&gt;
    Form group description.
  &lt;/div&gt;
  &lt;div class=&quot;form-item__group&quot; id=&quot;group&quot;&gt;
    &lt;div class=&quot;form-item--radio [modifier class]&quot;&gt;
      &lt;input class=&quot;form-item__widget&quot; type=&quot;checkbox&quot; id=&quot;option-1&quot; value=&quot;1&quot;&gt;
      &lt;label class=&quot;form-item__label&quot; for=&quot;option-1&quot;&gt;Option 1&lt;/label&gt;
      &lt;div class=&quot;form-item__description&quot;&gt;
        Form item description.
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-item--radio [modifier class]&quot;&gt;
      &lt;input class=&quot;form-item__widget&quot; type=&quot;checkbox&quot; id=&quot;option-2&quot; value=&quot;2&quot;&gt;
      &lt;label class=&quot;form-item__label&quot; for=&quot;option-2&quot;&gt;Option 2&lt;/label&gt;
      &lt;div class=&quot;form-item__description&quot;&gt;
        Form item description.
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>forms/form-item/_form-item.scss</code>, line 17
        </div>
          </section>
          <section id="kssref-forms-form-table" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-forms-form-table">
            <span class="kss-title__ref">
              6.7
              <span class="kss-title__permalink-hash">
                forms.form-table
              </span>
            </span>
            Drupal admin tables
          </a>
        </h2>

                  <div class="kss-description">
            <p>Complex forms that appear in html <code>&lt;table&gt;</code> elements.</p>
<p>If your custom theme isn&#39;t used for Drupal&#39;s admin pages, you can safely
delete this component to save file weight in the generated CSS.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <table class="form-table__sticky-header" style="position: fixed; visibility: visible;">
<thead>
  <tr>
    <th>Permission</th>
    <th class="form-table__narrow-column">anonymous user</th>
    <th class="form-table__narrow-column">authenticated user</th>
    <th class="form-table__narrow-column">administrator</th>
  </tr>
</thead>
</table>

<table class="form-table ">
<thead>
  <tr>
    <th>Permission</th>
    <th class="form-table__narrow-column">anonymous user</th>
    <th class="form-table__narrow-column">authenticated user</th>
    <th class="form-table__narrow-column">administrator</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="module" colspan="4">Block</td>
  </tr>
  <tr>
    <td class="permission">
      <div class="form-item form-type-item">
        Administer blocks
      </div>
    </td>
    <td class="form-table__narrow-column">
      <div class="form-item form-type-checkbox">
        <label class="element-invisible" for="edit-1-administer-blocks">anonymous user: Administer blocks </label>
        <input class="form-checkbox" id="edit-1-administer-blocks" name="1[administer blocks]" value="administer blocks" type="checkbox">
      </div>
    </td>
    <td class="form-table__narrow-column">
      <div class="form-item form-type-checkbox form-item-2-administer-blocks">
        <label class="element-invisible" for="edit-2-administer-blocks">authenticated user: Administer blocks </label>
        <input class="rid-2 form-checkbox" id="edit-2-administer-blocks" name="2[administer blocks]" value="administer blocks" type="checkbox">
      </div>
    </td>
    <td class="form-table__narrow-column">
      <div class="form-item form-type-checkbox form-item-3-administer-blocks">
        <label class="element-invisible" for="edit-3-administer-blocks">administrator: Administer blocks </label>
        <input class="rid-3 form-checkbox real-checkbox" id="edit-3-administer-blocks" name="3[administer blocks]" value="administer blocks" checked="checked" type="checkbox"><input style="display: none;" title="This permission is inherited from the authenticated user role." class="dummy-checkbox" disabled="disabled" checked="checked" type="checkbox">
      </div>
    </td>
  </tr>
  <tr>
    <td class="module" colspan="4">Devel</td>
  </tr>
  <tr>
    <td class="permission">
      <div id="edit-access-devel-information" class="form-item form-type-item">
        Access developer information
        <div class="description">View developer output like variable printouts, query log, etc. <em class="permission-warning">Warning: Give to trusted roles only; this permission has security implications.</em></div>
      </div>
    </td>
    <td class="form-table__narrow-column">
      <div class="form-item form-type-checkbox form-item-1-access-devel-information">
        <label class="element-invisible" for="edit-1-access-devel-information">anonymous user: Access developer information </label>
        <input class="rid-1 form-checkbox" id="edit-1-access-devel-information" name="1[access devel information]" value="access devel information" type="checkbox">
      </div>
    </td>
    <td class="form-table__narrow-column">
      <div class="form-item form-type-checkbox form-item-2-access-devel-information">
        <label class="element-invisible" for="edit-2-access-devel-information">authenticated user: Access developer information </label>
        <input class="rid-2 form-checkbox" id="edit-2-access-devel-information" name="2[access devel information]" value="access devel information" type="checkbox">
      </div>
    </td>
    <td class="form-table__narrow-column">
      <div class="form-item form-type-checkbox form-item-3-access-devel-information">
        <label class="element-invisible" for="edit-3-access-devel-information">administrator: Access developer information </label>
        <input class="rid-3 form-checkbox real-checkbox" id="edit-3-access-devel-information" name="3[access devel information]" value="access devel information" checked="checked" type="checkbox"><input style="display: none;" title="This permission is inherited from the authenticated user role." class="dummy-checkbox" disabled="disabled" checked="checked" type="checkbox">
      </div>
    </td>
  </tr>
  <tr>
    <td class="permission">
      <div id="edit-execute-php-code" class="form-item form-type-item">
        Execute PHP code
        <div class="description">Run arbitrary PHP from a block. <em class="permission-warning">Warning: Give to trusted roles only; this permission has security implications.</em></div>
      </div>
    </td>
    <td class="form-table__narrow-column">
      <div class="form-item form-type-checkbox form-item-1-execute-php-code">
        <label class="element-invisible" for="edit-1-execute-php-code">anonymous user: Execute PHP code </label>
        <input class="rid-1 form-checkbox" id="edit-1-execute-php-code" name="1[execute php code]" value="execute php code" type="checkbox">
      </div>
    </td>
    <td class="form-table__narrow-column">
      <div class="form-item form-type-checkbox form-item-2-execute-php-code">
        <label class="element-invisible" for="edit-2-execute-php-code">authenticated user: Execute PHP code </label>
        <input class="rid-2 form-checkbox" id="edit-2-execute-php-code" name="2[execute php code]" value="execute php code" type="checkbox">
      </div>
    </td>
    <td class="form-table__narrow-column">
      <div class="form-item form-type-checkbox form-item-3-execute-php-code">
        <label class="element-invisible" for="edit-3-execute-php-code">administrator: Execute PHP code </label>
        <input class="rid-3 form-checkbox real-checkbox" id="edit-3-execute-php-code" name="3[execute php code]" value="execute php code" checked="checked" type="checkbox"><input style="display: none;" title="This permission is inherited from the authenticated user role." class="dummy-checkbox" disabled="disabled" checked="checked" type="checkbox">
      </div>
    </td>
  </tr>
</tbody>
</table>
          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;table class=&quot;form-table__sticky-header&quot; style=&quot;position: fixed; visibility: visible;&quot;&gt;
&lt;thead&gt;
  &lt;tr&gt;
    &lt;th&gt;Permission&lt;/th&gt;
    &lt;th class=&quot;form-table__narrow-column&quot;&gt;anonymous user&lt;/th&gt;
    &lt;th class=&quot;form-table__narrow-column&quot;&gt;authenticated user&lt;/th&gt;
    &lt;th class=&quot;form-table__narrow-column&quot;&gt;administrator&lt;/th&gt;
  &lt;/tr&gt;
&lt;/thead&gt;
&lt;/table&gt;

&lt;table class=&quot;form-table &quot;&gt;
&lt;thead&gt;
  &lt;tr&gt;
    &lt;th&gt;Permission&lt;/th&gt;
    &lt;th class=&quot;form-table__narrow-column&quot;&gt;anonymous user&lt;/th&gt;
    &lt;th class=&quot;form-table__narrow-column&quot;&gt;authenticated user&lt;/th&gt;
    &lt;th class=&quot;form-table__narrow-column&quot;&gt;administrator&lt;/th&gt;
  &lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
  &lt;tr&gt;
    &lt;td class=&quot;module&quot; colspan=&quot;4&quot;&gt;Block&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td class=&quot;permission&quot;&gt;
      &lt;div class=&quot;form-item form-type-item&quot;&gt;
        Administer blocks
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td class=&quot;form-table__narrow-column&quot;&gt;
      &lt;div class=&quot;form-item form-type-checkbox&quot;&gt;
        &lt;label class=&quot;element-invisible&quot; for=&quot;edit-1-administer-blocks&quot;&gt;anonymous user: Administer blocks &lt;/label&gt;
        &lt;input class=&quot;form-checkbox&quot; id=&quot;edit-1-administer-blocks&quot; name=&quot;1[administer blocks]&quot; value=&quot;administer blocks&quot; type=&quot;checkbox&quot;&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td class=&quot;form-table__narrow-column&quot;&gt;
      &lt;div class=&quot;form-item form-type-checkbox form-item-2-administer-blocks&quot;&gt;
        &lt;label class=&quot;element-invisible&quot; for=&quot;edit-2-administer-blocks&quot;&gt;authenticated user: Administer blocks &lt;/label&gt;
        &lt;input class=&quot;rid-2 form-checkbox&quot; id=&quot;edit-2-administer-blocks&quot; name=&quot;2[administer blocks]&quot; value=&quot;administer blocks&quot; type=&quot;checkbox&quot;&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td class=&quot;form-table__narrow-column&quot;&gt;
      &lt;div class=&quot;form-item form-type-checkbox form-item-3-administer-blocks&quot;&gt;
        &lt;label class=&quot;element-invisible&quot; for=&quot;edit-3-administer-blocks&quot;&gt;administrator: Administer blocks &lt;/label&gt;
        &lt;input class=&quot;rid-3 form-checkbox real-checkbox&quot; id=&quot;edit-3-administer-blocks&quot; name=&quot;3[administer blocks]&quot; value=&quot;administer blocks&quot; checked=&quot;checked&quot; type=&quot;checkbox&quot;&gt;&lt;input style=&quot;display: none;&quot; title=&quot;This permission is inherited from the authenticated user role.&quot; class=&quot;dummy-checkbox&quot; disabled=&quot;disabled&quot; checked=&quot;checked&quot; type=&quot;checkbox&quot;&gt;
      &lt;/div&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td class=&quot;module&quot; colspan=&quot;4&quot;&gt;Devel&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td class=&quot;permission&quot;&gt;
      &lt;div id=&quot;edit-access-devel-information&quot; class=&quot;form-item form-type-item&quot;&gt;
        Access developer information
        &lt;div class=&quot;description&quot;&gt;View developer output like variable printouts, query log, etc. &lt;em class=&quot;permission-warning&quot;&gt;Warning: Give to trusted roles only; this permission has security implications.&lt;/em&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td class=&quot;form-table__narrow-column&quot;&gt;
      &lt;div class=&quot;form-item form-type-checkbox form-item-1-access-devel-information&quot;&gt;
        &lt;label class=&quot;element-invisible&quot; for=&quot;edit-1-access-devel-information&quot;&gt;anonymous user: Access developer information &lt;/label&gt;
        &lt;input class=&quot;rid-1 form-checkbox&quot; id=&quot;edit-1-access-devel-information&quot; name=&quot;1[access devel information]&quot; value=&quot;access devel information&quot; type=&quot;checkbox&quot;&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td class=&quot;form-table__narrow-column&quot;&gt;
      &lt;div class=&quot;form-item form-type-checkbox form-item-2-access-devel-information&quot;&gt;
        &lt;label class=&quot;element-invisible&quot; for=&quot;edit-2-access-devel-information&quot;&gt;authenticated user: Access developer information &lt;/label&gt;
        &lt;input class=&quot;rid-2 form-checkbox&quot; id=&quot;edit-2-access-devel-information&quot; name=&quot;2[access devel information]&quot; value=&quot;access devel information&quot; type=&quot;checkbox&quot;&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td class=&quot;form-table__narrow-column&quot;&gt;
      &lt;div class=&quot;form-item form-type-checkbox form-item-3-access-devel-information&quot;&gt;
        &lt;label class=&quot;element-invisible&quot; for=&quot;edit-3-access-devel-information&quot;&gt;administrator: Access developer information &lt;/label&gt;
        &lt;input class=&quot;rid-3 form-checkbox real-checkbox&quot; id=&quot;edit-3-access-devel-information&quot; name=&quot;3[access devel information]&quot; value=&quot;access devel information&quot; checked=&quot;checked&quot; type=&quot;checkbox&quot;&gt;&lt;input style=&quot;display: none;&quot; title=&quot;This permission is inherited from the authenticated user role.&quot; class=&quot;dummy-checkbox&quot; disabled=&quot;disabled&quot; checked=&quot;checked&quot; type=&quot;checkbox&quot;&gt;
      &lt;/div&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td class=&quot;permission&quot;&gt;
      &lt;div id=&quot;edit-execute-php-code&quot; class=&quot;form-item form-type-item&quot;&gt;
        Execute PHP code
        &lt;div class=&quot;description&quot;&gt;Run arbitrary PHP from a block. &lt;em class=&quot;permission-warning&quot;&gt;Warning: Give to trusted roles only; this permission has security implications.&lt;/em&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td class=&quot;form-table__narrow-column&quot;&gt;
      &lt;div class=&quot;form-item form-type-checkbox form-item-1-execute-php-code&quot;&gt;
        &lt;label class=&quot;element-invisible&quot; for=&quot;edit-1-execute-php-code&quot;&gt;anonymous user: Execute PHP code &lt;/label&gt;
        &lt;input class=&quot;rid-1 form-checkbox&quot; id=&quot;edit-1-execute-php-code&quot; name=&quot;1[execute php code]&quot; value=&quot;execute php code&quot; type=&quot;checkbox&quot;&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td class=&quot;form-table__narrow-column&quot;&gt;
      &lt;div class=&quot;form-item form-type-checkbox form-item-2-execute-php-code&quot;&gt;
        &lt;label class=&quot;element-invisible&quot; for=&quot;edit-2-execute-php-code&quot;&gt;authenticated user: Execute PHP code &lt;/label&gt;
        &lt;input class=&quot;rid-2 form-checkbox&quot; id=&quot;edit-2-execute-php-code&quot; name=&quot;2[execute php code]&quot; value=&quot;execute php code&quot; type=&quot;checkbox&quot;&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td class=&quot;form-table__narrow-column&quot;&gt;
      &lt;div class=&quot;form-item form-type-checkbox form-item-3-execute-php-code&quot;&gt;
        &lt;label class=&quot;element-invisible&quot; for=&quot;edit-3-execute-php-code&quot;&gt;administrator: Execute PHP code &lt;/label&gt;
        &lt;input class=&quot;rid-3 form-checkbox real-checkbox&quot; id=&quot;edit-3-execute-php-code&quot; name=&quot;3[execute php code]&quot; value=&quot;execute php code&quot; checked=&quot;checked&quot; type=&quot;checkbox&quot;&gt;&lt;input style=&quot;display: none;&quot; title=&quot;This permission is inherited from the authenticated user role.&quot; class=&quot;dummy-checkbox&quot; disabled=&quot;disabled&quot; checked=&quot;checked&quot; type=&quot;checkbox&quot;&gt;
      &lt;/div&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>forms/form-table/_form-table.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-forms-progress-bar" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-forms-progress-bar">
            <span class="kss-title__ref">
              6.8
              <span class="kss-title__permalink-hash">
                forms.progress-bar
              </span>
            </span>
            Progress bar
          </a>
        </h2>

                  <div class="kss-description">
            <p>Shows the progress of a task in a simple bar graph.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Examples          </div>

                      <div class="kss-modifier__default-name kss-style">
              Default styling
            </div>
          
          <div class="kss-modifier__example">
            <div class="progress-bar [modifier class]">
  <div class="progress-bar__bar"><div class="progress-bar__fill" style="width: 60%"></div></div>
  <div class="progress-bar__percentage">60%</div>
  <div class="progress-bar__message">Installing...</div>
</div>

          </div>

                      <div class="kss-modifier__name kss-style">
              .progress-bar--inline
            </div>
            <div class="kss-modifier__description kss-style">
              An inline progress bar.
            </div>
            <div class="kss-modifier__example">
              <div class="progress-bar progress-bar--inline">
  <div class="progress-bar__bar"><div class="progress-bar__fill" style="width: 60%"></div></div>
  <div class="progress-bar__percentage">60%</div>
  <div class="progress-bar__message">Installing...</div>
</div>

            </div>
                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;progress-bar [modifier class]&quot;&gt;
  &lt;div class=&quot;progress-bar__bar&quot;&gt;&lt;div class=&quot;progress-bar__fill&quot; style=&quot;width: 60%&quot;&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div class=&quot;progress-bar__percentage&quot;&gt;60%&lt;/div&gt;
  &lt;div class=&quot;progress-bar__message&quot;&gt;Installing...&lt;/div&gt;
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>forms/progress-bar/_progress-bar.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-forms-progress-throbber" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-forms-progress-throbber">
            <span class="kss-title__ref">
              6.9
              <span class="kss-title__permalink-hash">
                forms.progress-throbber
              </span>
            </span>
            Progress throbber
          </a>
        </h2>

                  <div class="kss-description">
            <p>Shows the progress of a task using a throbber.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <div class="progress-throbber ">
  <div class="progress-throbber__widget">&nbsp;</div>
  <div class="progress-throbber__message">Progress message</div>
</div>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;progress-throbber &quot;&gt;
  &lt;div class=&quot;progress-throbber__widget&quot;&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class=&quot;progress-throbber__message&quot;&gt;Progress message&lt;/div&gt;
&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>forms/progress-throbber/_progress-throbber.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-forms-resizable-textarea" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-forms-resizable-textarea">
            <span class="kss-title__ref">
              6.10
              <span class="kss-title__permalink-hash">
                forms.resizable-textarea
              </span>
            </span>
            Resizable textarea
          </a>
        </h2>

                  <div class="kss-description">
            <p>A textarea that can be resized with a &quot;grippie&quot; widget.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <textarea class="resizable-textarea " rows="5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</textarea>
<div class="resizable-textarea__grippie"></div>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;textarea class=&quot;resizable-textarea &quot; rows=&quot;5&quot;&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
&lt;/textarea&gt;
&lt;div class=&quot;resizable-textarea__grippie&quot;&gt;&lt;/div&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>forms/resizable-textarea/_resizable-textarea.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-forms-table-drag" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-forms-table-drag">
            <span class="kss-title__ref">
              6.11
              <span class="kss-title__permalink-hash">
                forms.table-drag
              </span>
            </span>
            Table drag
          </a>
        </h2>

                  <div class="kss-description">
            <p>Drag and drop rows inside a form.</p>
<p>If your custom theme isn&#39;t used for Drupal&#39;s admin pages, you can safely
delete this component to save file weight in the generated CSS.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <table class="tabledrag-processed">
<thead><tr><th>Field</th><th>Label</th><th colspan="3">Format</th></tr></thead>
<tbody>
  <tr class="region-message region-visible-message region-populated">
    <td colspan="7">No field is displayed.</td>
  </tr>
  <tr class="draggable tabledrag-leaf odd" id="field-image">
    <td><a href="#" class="tabledrag-handle" title="Drag to re-order"><div class="handle">&nbsp;</div></a>Image</td>
    <td class="tabledrag-hide" style="display: none;">
      <div class="form-item form-type-textfield form-item-fields-field-image-weight">
        <label class="visually-hidden" for="edit-fields-field-image-weight">Weight for Image</label>
        <input class="field-weight form-text" type="text" id="edit-fields-field-image-weight" name="fields[field_image][weight]" value="-1" size="3" maxlength="128">
      </div>
    </td>
    <td class="tabledrag-hide" style="display: none;">
      <div class="form-item form-type-select form-item-fields-field-image-parent">
        <label class="visually-hidden" for="edit-fields-field-image-parent">Label display for Image</label>
        <select class="field-parent form-select" id="edit-fields-field-image-parent" name="fields[field_image][parent]"><option value="" selected="selected">- None -</option></select>
      </div>
      <input class="field-name" type="hidden" name="fields[field_image][parent_wrapper][hidden_name]" value="field_image">
    </td>
    <td>
      <div class="form-item form-type-select form-item-fields-field-image-label">
        <label class="visually-hidden" for="edit-fields-field-image-label">Label display for Image</label>
        <select id="edit-fields-field-image-label" name="fields[field_image][label]" class="form-select"><option value="above">Above</option><option value="inline">Inline</option><option value="hidden" selected="selected">&lt;Hidden&gt;</option></select>
      </div>
    </td>
    <td>
      <div class="form-item form-type-select form-item-fields-field-image-type">
        <label class="visually-hidden" for="edit-fields-field-image-type">Formatter for Image</label>
        <select class="field-formatter-type form-select" id="edit-fields-field-image-type" name="fields[field_image][type]"><option value="image" selected="selected">Image</option><option value="hidden">&lt;Hidden&gt;</option></select>
      </div>
    </td>
    <td class="field-formatter-summary-cell">
      <div class="field-formatter-summary">Image style: Large (480x480)</div>
    </td>
    <td>
      <div class="field-formatter-settings-edit-wrapper">
        <input class="field-formatter-settings-edit form-submit ajax-processed" alt="Edit" type="image" id="edit-fields-field-image-settings-edit" name="field_image_formatter_settings_edit" src="http://drupal7x.dev/misc/configure.png">
      </div>
    </td>
  </tr>
  <tr class="draggable tabledrag-leaf even drag-previous" id="body">
    <td>
      <a href="#" class="tabledrag-handle" title="Drag to re-order"><div class="handle">&nbsp;</div></a>Body<span class="warning tabledrag-changed">*</span>
    </td>
    <td class="tabledrag-hide" style="display: none;">
      <div class="form-item form-type-textfield form-item-fields-body-weight">
        <label class="visually-hidden" for="edit-fields-body-weight">Weight for Body</label>
        <input class="field-weight form-text" type="text" id="edit-fields-body-weight" name="fields[body][weight]" value="0" size="3" maxlength="128">
      </div>
    </td>
    <td class="tabledrag-hide" style="display: none;">
      <div class="form-item form-type-select form-item-fields-body-parent">
        <label class="visually-hidden" for="edit-fields-body-parent">Label display for Body</label>
        <select class="field-parent form-select" id="edit-fields-body-parent" name="fields[body][parent]"><option value="" selected="selected">- None -</option></select>
      </div>
      <input class="field-name" type="hidden" name="fields[body][parent_wrapper][hidden_name]" value="body">
    </td>
    <td>
      <div class="form-item form-type-select form-item-fields-body-label">
        <label class="visually-hidden" for="edit-fields-body-label">Label display for Body</label>
        <select id="edit-fields-body-label" name="fields[body][label]" class="form-select"><option value="above">Above</option><option value="inline">Inline</option><option value="hidden" selected="selected">&lt;Hidden&gt;</option></select>
      </div>
    </td>
    <td>
      <div class="form-item form-type-select form-item-fields-body-type">
        <label class="visually-hidden" for="edit-fields-body-type">Formatter for Body</label>
        <select class="field-formatter-type form-select" id="edit-fields-body-type" name="fields[body][type]"><option value="text_default" selected="selected">Default</option><option value="text_plain">Plain text</option><option value="text_trimmed">Trimmed</option><option value="text_summary_or_trimmed">Summary or trimmed</option><option value="hidden">&lt;Hidden&gt;</option></select>
      </div>
    </td>
    <td></td>
    <td></td>
  </tr>
  <tr class="draggable tabledrag-leaf odd" id="field-tags">
    <td>
      <a href="#" class="tabledrag-handle" title="Drag to re-order"><div class="handle">&nbsp;</div></a>Tags
    </td>
    <td class="tabledrag-hide" style="display: none;">
      <div class="form-item form-type-textfield form-item-fields-field-tags-weight">
        <label class="visually-hidden" for="edit-fields-field-tags-weight">Weight for Tags</label>
        <input class="field-weight form-text" type="text" id="edit-fields-field-tags-weight" name="fields[field_tags][weight]" value="10" size="3" maxlength="128">
      </div>
    </td>
    <td class="tabledrag-hide" style="display: none;">
      <div class="form-item form-type-select form-item-fields-field-tags-parent">
        <label class="visually-hidden" for="edit-fields-field-tags-parent">Label display for Tags</label>
        <select class="field-parent form-select" id="edit-fields-field-tags-parent" name="fields[field_tags][parent]"><option value="" selected="selected">- None -</option></select>
      </div>
      <input class="field-name" type="hidden" name="fields[field_tags][parent_wrapper][hidden_name]" value="field_tags">
    </td>
    <td>
      <div class="form-item form-type-select form-item-fields-field-tags-label">
        <label class="visually-hidden" for="edit-fields-field-tags-label">Label display for Tags</label>
        <select id="edit-fields-field-tags-label" name="fields[field_tags][label]" class="form-select"><option value="above" selected="selected">Above</option><option value="inline">Inline</option><option value="hidden">&lt;Hidden&gt;</option></select>
      </div>
    </td>
    <td>
      <div class="form-item form-type-select form-item-fields-field-tags-type">
        <label class="visually-hidden" for="edit-fields-field-tags-type">Formatter for Tags</label>
          <select class="field-formatter-type form-select" id="edit-fields-field-tags-type" name="fields[field_tags][type]"><option value="taxonomy_term_reference_link" selected="selected">Link</option><option value="taxonomy_term_reference_plain">Plain text</option><option value="taxonomy_term_reference_rss_category">RSS category</option><option value="hidden">&lt;Hidden&gt;</option></select>
      </div>
    </td>
    <td></td>
    <td></td>
  </tr>
  <tr class="region-title region-hidden-title"><td colspan="7">Hidden</td></tr>
  <tr class="region-message region-hidden-message region-empty"><td colspan="7">No field is hidden.</td></tr>
</tbody>
</table>

          </div>

                  </div>
                  <div class="kss-markup kss-style">
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;table class=&quot;tabledrag-processed&quot;&gt;
&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Field&lt;/th&gt;&lt;th&gt;Label&lt;/th&gt;&lt;th colspan=&quot;3&quot;&gt;Format&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
&lt;tbody&gt;
  &lt;tr class=&quot;region-message region-visible-message region-populated&quot;&gt;
    &lt;td colspan=&quot;7&quot;&gt;No field is displayed.&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class=&quot;draggable tabledrag-leaf odd&quot; id=&quot;field-image&quot;&gt;
    &lt;td&gt;&lt;a href=&quot;#&quot; class=&quot;tabledrag-handle&quot; title=&quot;Drag to re-order&quot;&gt;&lt;div class=&quot;handle&quot;&gt;&amp;nbsp;&lt;/div&gt;&lt;/a&gt;Image&lt;/td&gt;
    &lt;td class=&quot;tabledrag-hide&quot; style=&quot;display: none;&quot;&gt;
      &lt;div class=&quot;form-item form-type-textfield form-item-fields-field-image-weight&quot;&gt;
        &lt;label class=&quot;visually-hidden&quot; for=&quot;edit-fields-field-image-weight&quot;&gt;Weight for Image&lt;/label&gt;
        &lt;input class=&quot;field-weight form-text&quot; type=&quot;text&quot; id=&quot;edit-fields-field-image-weight&quot; name=&quot;fields[field_image][weight]&quot; value=&quot;-1&quot; size=&quot;3&quot; maxlength=&quot;128&quot;&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td class=&quot;tabledrag-hide&quot; style=&quot;display: none;&quot;&gt;
      &lt;div class=&quot;form-item form-type-select form-item-fields-field-image-parent&quot;&gt;
        &lt;label class=&quot;visually-hidden&quot; for=&quot;edit-fields-field-image-parent&quot;&gt;Label display for Image&lt;/label&gt;
        &lt;select class=&quot;field-parent form-select&quot; id=&quot;edit-fields-field-image-parent&quot; name=&quot;fields[field_image][parent]&quot;&gt;&lt;option value=&quot;&quot; selected=&quot;selected&quot;&gt;- None -&lt;/option&gt;&lt;/select&gt;
      &lt;/div&gt;
      &lt;input class=&quot;field-name&quot; type=&quot;hidden&quot; name=&quot;fields[field_image][parent_wrapper][hidden_name]&quot; value=&quot;field_image&quot;&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;div class=&quot;form-item form-type-select form-item-fields-field-image-label&quot;&gt;
        &lt;label class=&quot;visually-hidden&quot; for=&quot;edit-fields-field-image-label&quot;&gt;Label display for Image&lt;/label&gt;
        &lt;select id=&quot;edit-fields-field-image-label&quot; name=&quot;fields[field_image][label]&quot; class=&quot;form-select&quot;&gt;&lt;option value=&quot;above&quot;&gt;Above&lt;/option&gt;&lt;option value=&quot;inline&quot;&gt;Inline&lt;/option&gt;&lt;option value=&quot;hidden&quot; selected=&quot;selected&quot;&gt;&amp;lt;Hidden&amp;gt;&lt;/option&gt;&lt;/select&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;div class=&quot;form-item form-type-select form-item-fields-field-image-type&quot;&gt;
        &lt;label class=&quot;visually-hidden&quot; for=&quot;edit-fields-field-image-type&quot;&gt;Formatter for Image&lt;/label&gt;
        &lt;select class=&quot;field-formatter-type form-select&quot; id=&quot;edit-fields-field-image-type&quot; name=&quot;fields[field_image][type]&quot;&gt;&lt;option value=&quot;image&quot; selected=&quot;selected&quot;&gt;Image&lt;/option&gt;&lt;option value=&quot;hidden&quot;&gt;&amp;lt;Hidden&amp;gt;&lt;/option&gt;&lt;/select&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td class=&quot;field-formatter-summary-cell&quot;&gt;
      &lt;div class=&quot;field-formatter-summary&quot;&gt;Image style: Large (480x480)&lt;/div&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;div class=&quot;field-formatter-settings-edit-wrapper&quot;&gt;
        &lt;input class=&quot;field-formatter-settings-edit form-submit ajax-processed&quot; alt=&quot;Edit&quot; type=&quot;image&quot; id=&quot;edit-fields-field-image-settings-edit&quot; name=&quot;field_image_formatter_settings_edit&quot; src=&quot;http://drupal7x.dev/misc/configure.png&quot;&gt;
      &lt;/div&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class=&quot;draggable tabledrag-leaf even drag-previous&quot; id=&quot;body&quot;&gt;
    &lt;td&gt;
      &lt;a href=&quot;#&quot; class=&quot;tabledrag-handle&quot; title=&quot;Drag to re-order&quot;&gt;&lt;div class=&quot;handle&quot;&gt;&amp;nbsp;&lt;/div&gt;&lt;/a&gt;Body&lt;span class=&quot;warning tabledrag-changed&quot;&gt;*&lt;/span&gt;
    &lt;/td&gt;
    &lt;td class=&quot;tabledrag-hide&quot; style=&quot;display: none;&quot;&gt;
      &lt;div class=&quot;form-item form-type-textfield form-item-fields-body-weight&quot;&gt;
        &lt;label class=&quot;visually-hidden&quot; for=&quot;edit-fields-body-weight&quot;&gt;Weight for Body&lt;/label&gt;
        &lt;input class=&quot;field-weight form-text&quot; type=&quot;text&quot; id=&quot;edit-fields-body-weight&quot; name=&quot;fields[body][weight]&quot; value=&quot;0&quot; size=&quot;3&quot; maxlength=&quot;128&quot;&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td class=&quot;tabledrag-hide&quot; style=&quot;display: none;&quot;&gt;
      &lt;div class=&quot;form-item form-type-select form-item-fields-body-parent&quot;&gt;
        &lt;label class=&quot;visually-hidden&quot; for=&quot;edit-fields-body-parent&quot;&gt;Label display for Body&lt;/label&gt;
        &lt;select class=&quot;field-parent form-select&quot; id=&quot;edit-fields-body-parent&quot; name=&quot;fields[body][parent]&quot;&gt;&lt;option value=&quot;&quot; selected=&quot;selected&quot;&gt;- None -&lt;/option&gt;&lt;/select&gt;
      &lt;/div&gt;
      &lt;input class=&quot;field-name&quot; type=&quot;hidden&quot; name=&quot;fields[body][parent_wrapper][hidden_name]&quot; value=&quot;body&quot;&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;div class=&quot;form-item form-type-select form-item-fields-body-label&quot;&gt;
        &lt;label class=&quot;visually-hidden&quot; for=&quot;edit-fields-body-label&quot;&gt;Label display for Body&lt;/label&gt;
        &lt;select id=&quot;edit-fields-body-label&quot; name=&quot;fields[body][label]&quot; class=&quot;form-select&quot;&gt;&lt;option value=&quot;above&quot;&gt;Above&lt;/option&gt;&lt;option value=&quot;inline&quot;&gt;Inline&lt;/option&gt;&lt;option value=&quot;hidden&quot; selected=&quot;selected&quot;&gt;&amp;lt;Hidden&amp;gt;&lt;/option&gt;&lt;/select&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;div class=&quot;form-item form-type-select form-item-fields-body-type&quot;&gt;
        &lt;label class=&quot;visually-hidden&quot; for=&quot;edit-fields-body-type&quot;&gt;Formatter for Body&lt;/label&gt;
        &lt;select class=&quot;field-formatter-type form-select&quot; id=&quot;edit-fields-body-type&quot; name=&quot;fields[body][type]&quot;&gt;&lt;option value=&quot;text_default&quot; selected=&quot;selected&quot;&gt;Default&lt;/option&gt;&lt;option value=&quot;text_plain&quot;&gt;Plain text&lt;/option&gt;&lt;option value=&quot;text_trimmed&quot;&gt;Trimmed&lt;/option&gt;&lt;option value=&quot;text_summary_or_trimmed&quot;&gt;Summary or trimmed&lt;/option&gt;&lt;option value=&quot;hidden&quot;&gt;&amp;lt;Hidden&amp;gt;&lt;/option&gt;&lt;/select&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class=&quot;draggable tabledrag-leaf odd&quot; id=&quot;field-tags&quot;&gt;
    &lt;td&gt;
      &lt;a href=&quot;#&quot; class=&quot;tabledrag-handle&quot; title=&quot;Drag to re-order&quot;&gt;&lt;div class=&quot;handle&quot;&gt;&amp;nbsp;&lt;/div&gt;&lt;/a&gt;Tags
    &lt;/td&gt;
    &lt;td class=&quot;tabledrag-hide&quot; style=&quot;display: none;&quot;&gt;
      &lt;div class=&quot;form-item form-type-textfield form-item-fields-field-tags-weight&quot;&gt;
        &lt;label class=&quot;visually-hidden&quot; for=&quot;edit-fields-field-tags-weight&quot;&gt;Weight for Tags&lt;/label&gt;
        &lt;input class=&quot;field-weight form-text&quot; type=&quot;text&quot; id=&quot;edit-fields-field-tags-weight&quot; name=&quot;fields[field_tags][weight]&quot; value=&quot;10&quot; size=&quot;3&quot; maxlength=&quot;128&quot;&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td class=&quot;tabledrag-hide&quot; style=&quot;display: none;&quot;&gt;
      &lt;div class=&quot;form-item form-type-select form-item-fields-field-tags-parent&quot;&gt;
        &lt;label class=&quot;visually-hidden&quot; for=&quot;edit-fields-field-tags-parent&quot;&gt;Label display for Tags&lt;/label&gt;
        &lt;select class=&quot;field-parent form-select&quot; id=&quot;edit-fields-field-tags-parent&quot; name=&quot;fields[field_tags][parent]&quot;&gt;&lt;option value=&quot;&quot; selected=&quot;selected&quot;&gt;- None -&lt;/option&gt;&lt;/select&gt;
      &lt;/div&gt;
      &lt;input class=&quot;field-name&quot; type=&quot;hidden&quot; name=&quot;fields[field_tags][parent_wrapper][hidden_name]&quot; value=&quot;field_tags&quot;&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;div class=&quot;form-item form-type-select form-item-fields-field-tags-label&quot;&gt;
        &lt;label class=&quot;visually-hidden&quot; for=&quot;edit-fields-field-tags-label&quot;&gt;Label display for Tags&lt;/label&gt;
        &lt;select id=&quot;edit-fields-field-tags-label&quot; name=&quot;fields[field_tags][label]&quot; class=&quot;form-select&quot;&gt;&lt;option value=&quot;above&quot; selected=&quot;selected&quot;&gt;Above&lt;/option&gt;&lt;option value=&quot;inline&quot;&gt;Inline&lt;/option&gt;&lt;option value=&quot;hidden&quot;&gt;&amp;lt;Hidden&amp;gt;&lt;/option&gt;&lt;/select&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;div class=&quot;form-item form-type-select form-item-fields-field-tags-type&quot;&gt;
        &lt;label class=&quot;visually-hidden&quot; for=&quot;edit-fields-field-tags-type&quot;&gt;Formatter for Tags&lt;/label&gt;
          &lt;select class=&quot;field-formatter-type form-select&quot; id=&quot;edit-fields-field-tags-type&quot; name=&quot;fields[field_tags][type]&quot;&gt;&lt;option value=&quot;taxonomy_term_reference_link&quot; selected=&quot;selected&quot;&gt;Link&lt;/option&gt;&lt;option value=&quot;taxonomy_term_reference_plain&quot;&gt;Plain text&lt;/option&gt;&lt;option value=&quot;taxonomy_term_reference_rss_category&quot;&gt;RSS category&lt;/option&gt;&lt;option value=&quot;hidden&quot;&gt;&amp;lt;Hidden&amp;gt;&lt;/option&gt;&lt;/select&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class=&quot;region-title region-hidden-title&quot;&gt;&lt;td colspan=&quot;7&quot;&gt;Hidden&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class=&quot;region-message region-hidden-message region-empty&quot;&gt;&lt;td colspan=&quot;7&quot;&gt;No field is hidden.&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
          </div>
              
              <div class="kss-source kss-style">
          Source: <code>forms/table-drag/_table-drag.scss</code>, line 1
        </div>
          </section>
  </article>

<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script>
  prettyPrint();
  var spy = new ScrollSpy('#kss-node', {
    nav: '.kss-nav__menu-child > li > a',
    className: 'is-in-viewport'
  });
</script>




<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>
